<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Blog</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="js/jquery-3.6.4.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		<link rel="stylesheet" href="./css/in.css">
		<link rel="stylesheet" href="./css/css/bootstrap-icons.min.css">
		<style>
			.btn-outline-purple {
			  color: #2c1438;
			  border-color: #2c1438;
			}
			
			.btn-outline-purple:hover {
			  color: #fff;
			  background-color: #e47bd8;
			  border-color: #e47bd8;
			}
			.btn-outline-white {
			  color: #faebd7;
			  border-color: #faebd7;
			}
			
			.btn-outline-white:hover {
			  color: #2c1438;
			  background-color: #faebd7;
			  border-color: #faebd7;
			}
			.add_cover{
				position: relative;
				width: 300px;
				height: 100px;
				border-radius:50px ;
				font-size: 20px;
				z-index: 3;
				color: #7377fb;
				font-weight: bold;
				background-image: linear-gradient(#1c0a34 60%,#7377fb);
				border:1px solid;
				transition: 0.5s;
			}
			.add_cover:hover{
				color: white;
			}
		</style>
	</head>
	<body  style="background-color: #2c1438;">
		<div class="navbar d-flex navbar-expand-md justify-content-end navbar-light sticky-top" style="background: #e47bd8;">
			<button class="navbar-toggler" data-toggle="collapse" data-target="#top"><span class="navbar-toggler-icon"></span></button>
			<ul class=" nav py-2  collapse navbar-collapse" id="top">
				
				<li class="nav-item">
					<a href="./Home.html" class="text-dark text-decoration-none font-weight-bold nav-link">Home</a>
				</li>
				<li class="nav-item dropdown position-relative">
					<a href="#" data-toggle="dropdown" class="text-dark text-decoration-none font-weight-bold nav-link dropdown-toggle">Products</a>
					<ul class="dropdown-menu position-absolute" style="background: #e47bd8;">
						<li class="dropdown-header font-weight-bold text-white">
							title
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item font-weight-bold">
							select
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="./Blog.html" class="text-white text-decoration-none font-weight-bold nav-link">Bolg</a>
				</li>
				<li class="nav-item">
					<a href="./Our_mission.html" class="text-dark text-decoration-none font-weight-bold nav-link">Our mission</a>
				</li>
				<li class="nav-item">
					<a href="./Price.html" class="text-dark text-decoration-none font-weight-bold nav-link">Purchase</a>
				</li>
			</ul>
		</div>
		
		<div class="container-fluid vw-100 row">
			<nav class="col-md-3 vh-100"  style="background: #2c1438;">
				
				<img src="./img/Snipaste_2023-05-10_14-56-10.png" class="navbar-brand img-fluid" alt="">
				
				<ul class="navbar-nav text-white">
					<li class="dropdown-header">
						TRACK
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-clock-fill mr-1"></i>
						Timer
						</a>
					</li>
					<li class="dropdown-divider"></li>
					<li class="nav-item dropdown-header">
						ANALYZE
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-file-text-fill mr-1"></i>
						Reports
						</a>
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-clipboard2-pulse-fill mr-1"></i>
						Insights
						</a>
					</li>
					<li class="dropdown-divider"></li>
					<li class="dropdown-header nav-item">
						MANEGE
					</li>
					<li class="nav-item">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-folder-fill mr-1"></i>
						Projects
						</a>
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-person-badge-fill mr-1"></i>
						Clients
						</a>
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-person-gear mr-1"></i>
						Team
						</a>
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-tags-fill mr-1"></i>
						Tags
						</a>
					</li>
					<li class="nav-item my-2">
						<a href="#" class="text-decoration-none text-white">
						<i class="bi bi-question-circle-fill mr-1"></i>
						Help
						</a>
					</li>
				</ul>
				
			</nav>
			
			<div class="body col-md-9 col-12">
				
				<div class="row justify-content-between align-items-end h-50" style="background-image: linear-gradient(#0b0030 , #2c1438);">
					<div class="m-5 d-flex col-lg-5 col-12">
						<img src="./img/blog.png" class="mr-5" style="width: 150px;
						height: 170px;" alt="">
						<div class="">
							<h2 class="text-white font-weight-bold">
								闵睿
							</h2>
							<span class="text-white font-weight-light">
								5 Watchers | 13 Page View | 21 Deviations
							</span>
							<p class="text-white my-3">
								brief introduction
							</p>
						</div>
					
					</div>
					<button class="add_cover m-5 col-lg-3 col-9">
						ADD COVER IMAGE
					</button>
				</div>
				
				<nav class="navbar my-5"  style="background-image: linear-gradient(#db499b,#ffa513);">
					<ul class="navbar-nav flex-row justify-content-center w-100">
						<li class="nav-item">
							<h4 class="mx-3">
								Let's get tracking!
							</h4>
						</li>
						<li class="nav-item">
							<button class="btn btn-dark font-weight-bold mx-3">
								Get Core
							</button>
						</li>
					</ul>
				</nav>
				
				<div class="card bg-dark rounded p-5">
					<div class="card-header d-flex">
						<i class="bi bi-person-badge text-white my-auto mx-3" style="transform: scale(2);"></i>
						<input type="text" class="form-control bg-dark" placeholder="What's going on 2023?">
					</div>
					<div class="card-body d-flex justify-content-center">
						<p>
							<a href="#" class="text-white font-weight-bold text-decoration-none mx-5">
								<i class="bi bi-download"></i>
								STATUS UPDATE
							</a>
							<a href="#" class="text-white font-weight-bold text-decoration-none mx-5">
								<i class="bi bi-file-binary"></i>
								JOURNAL
							</a>
							<a href="#" class="text-white font-weight-bold text-decoration-none mx-5">
								<i class="bi bi-postage-fill"></i>
								POLL
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="footer row m-5">
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					TOGGL GLOBAL
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Blog
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Our Mission
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Working at Toggl
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					PRODUCT
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Features
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Pricing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Integrations
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						API
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					USE CASES
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Billing and Invoicing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Employee Time Tracking
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Project Budgeting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Reporting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Payroll
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Work Hours Tracker
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					Help
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Support & Knowledge Base
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Request A Demo
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Contact Us
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			
			
		</div>
		
	</body>
</html>